/**
 * Created by Jackie.Chen on 2017/5/25.
 */
'use strict'
var testTemplete = require('html!./history.html');
var datelogo= require('../../../images/date-btn-icon.png');
require('./history.less');
module.exports ={
  template: testTemplete,
  data:function(){
    return {
      ModelTrailList: [],
      DataTrailList: [],
      startDate:'',
      endDate:'',
      userId: localStorage.getItem("userId"),
      isTab1: true,
      isTab2: false,
      dataCount: 0,
      modelCount: 0,
      dataPageSize: 8,
      dataPageIndex: 1,
      modelPageSize: 8,
      modelPageIndex: 1
    }
  },
  mounted:function(){
    this.dateSel();
  },
  created:function(){
    this.getModelTrail(true);
    this.getDataTrail(true);
  },
  methods:{
    chooseTab1:function(){
      this.isTab1 = true;
      this.isTab2 = false;
    },
    chooseTab2:function(){
      this.isTab1 = false;
      this.isTab2 = true;
    },
    getModelTrail:function(isFirst){
      var me = this;
      me.startDate=$('.test-datepicker').eq(0).val() || '';
      me.endDate=$('.test-datepicker').eq(1).val() || '';
      this.$http.get('/record/myRecordList.json?userId='+me.userId+'&pageSize='+me.modelPageSize+'&pageIndex='+me.modelPageIndex+'&startDate='+me.startDate+'&endDate='+me.endDate).then(function(res) {
        //获取评论接口
        console.log('获取我的轨迹，请求后返回结果: ', res);
        if(res.data.status === 'OK') {
          me.ModelTrailList=res.data.result.list;
          me.modelCount = res.data.result.count;
          if(isFirst){
            me.initModelPage();
          }
        }else {
          layer.msg(res.data.message);
        }
      });
    },
    searchModel:function(){
      this.modelPageIndex=1;
      this.getModelTrail(true);
    },
    searchData:function(){
      this.dataPageIndex=1;
      this.getDataTrail(true);
    },
    getDataTrail:function(isFirst){
      var me = this;
      me.startDate=$('.test-datepicker').eq(2).val() || '';
      me.endDate=$('.test-datepicker').eq(3).val() || '';
      this.$http.get('/record/myRecordList.json?userId='+me.userId+'&pageSize='+me.dataPageSize+'&pageIndex='+me.dataPageIndex+'&startDate='+me.startDate+'&endDate='+me.endDate).then(function(res) {
        //获取评论接口
        console.log('获取我的轨迹，请求后返回结果: ', res);
        if(res.data.status === 'OK') {
          me.DataTrailList=res.data.result.list;
          me.dataCount = res.data.result.count;
          if(isFirst){
            me.initDataPage();
          }
        }else {
          layer.msg(res.data.message);
        }
      });
    },
    doChangeDataPage:function(num){
        this.dataPageIndex = num;
        this.getDataTrail();
      },
    doChangeModelPage:function(num){
      this.modelPageIndex = num;
      this.getModelTrail();
    },
    //分页
    initModelPage:function (){
      var me = this;
      laypage({
        cont: $('#modelPage'), //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
        pages: Math.ceil(me.modelCount/me.modelPageSize), //通过后台拿到的总页数
        //curr: totalNum || 1,
        curr: 1,
        skin: '#338af9',
        jump: function (obj, first) { //触发分页后的回调
           if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
               me.doChangeModelPage(obj.curr);
           }
        }
      });
    },
    //分页
    initDataPage:function (){
      var me = this;
      laypage({
        cont: $('#modelPage2'), //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
        pages: Math.ceil(me.dataCount/me.dataPageSize), //通过后台拿到的总页数
        //curr: totalNum || 1,
        curr: 1,
        skin: '#338af9',
        jump: function (obj, first) { //触发分页后的回调
          if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
            me.doChangeDataPage(obj.curr);
          }
        }
      });
    },
    //日期插件
    dateSel:function () {
      $(".test-datepicker").eq(0).datepicker({
        showOn: "button",
        buttonImage: datelogo,
        //buttonImage:"",
        buttonImageOnly: true,
        showAnim: 'slideDown',//show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
//        minDate: -1,//最小日期，可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
//        maxDate: +17,//最大日期，同上
//        defaultDate : +4, //默认日期，同上
        duration : 'fast',//动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
        firstDay : 1 ,//设置一周中的第一天。默认星期天0，星期一为1，以此类推。
        nextText : '下一月',//设置“下个月”链接的显示文字。鼠标放上去的时候
        prevText : '上一月',//设置“上个月”链接的显示文字。
        //showButtonPanel: true,//是否显示按钮面板
        currentText : '今天',//设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
        gotoCurrent : false,//如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
        dateFormat: 'yy-mm-dd',
        onClose: function( selectedDate ) {
          $(".test-datepicker").eq(1).datepicker( "option", "minDate", selectedDate );
        }
      });
      $(".test-datepicker").eq(1).datepicker({
        showOn: "button",
        buttonImage: datelogo,
        //buttonImage:"",
        buttonImageOnly: true,
        showAnim: 'slideDown',//show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
//        minDate: -1,//最小日期，可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
//        maxDate: +17,//最大日期，同上
//        defaultDate : +4, //默认日期，同上
        duration : 'fast',//动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
        firstDay : 1 ,//设置一周中的第一天。默认星期天0，星期一为1，以此类推。
        nextText : '下一月',//设置“下个月”链接的显示文字。鼠标放上去的时候
        prevText : '上一月',//设置“上个月”链接的显示文字。
        //showButtonPanel: true,//是否显示按钮面板
        currentText : '今天',//设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
        gotoCurrent : false,//如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
        dateFormat: 'yy-mm-dd',
        onClose: function( selectedDate ) {
          $(".test-datepicker").eq(0).datepicker( "option", "maxDate", selectedDate );
        }
      });
      $(".test-datepicker").eq(2).datepicker({
        showOn: "button",
        buttonImage: datelogo,
        //buttonImage:"",
        buttonImageOnly: true,
        showAnim: 'slideDown',//show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
//        minDate: -1,//最小日期，可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
//        maxDate: +17,//最大日期，同上
//        defaultDate : +4, //默认日期，同上
        duration : 'fast',//动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
        firstDay : 1 ,//设置一周中的第一天。默认星期天0，星期一为1，以此类推。
        nextText : '下一月',//设置“下个月”链接的显示文字。鼠标放上去的时候
        prevText : '上一月',//设置“上个月”链接的显示文字。
        //showButtonPanel: true,//是否显示按钮面板
        currentText : '今天',//设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
        gotoCurrent : false,//如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
        dateFormat: 'yy-mm-dd',
        onClose: function( selectedDate ) {
          $(".test-datepicker").eq(3).datepicker( "option", "minDate", selectedDate );
        }
      });
      $(".test-datepicker").eq(3).datepicker({
        showOn: "button",
        buttonImage: datelogo,
        //buttonImage:"",
        buttonImageOnly: true,
        showAnim: 'slideDown',//show 默认,slideDown 滑下,fadeIn 淡入,blind 百叶窗,bounce 反弹,Clip 剪辑,drop 降落,fold 折叠,slide 滑动
//        minDate: -1,//最小日期，可以是Date对象，或者是数字（从今天算起，例如+7），或者有效的字符串('y'代表年, 'm'代表月, 'w'代表周, 'd'代表日, 例如：'+1m +7d')。
//        maxDate: +17,//最大日期，同上
//        defaultDate : +4, //默认日期，同上
        duration : 'fast',//动画展示的时间，可选是"slow", "normal", "fast",''代表立刻，数字代表毫秒数
        firstDay : 1 ,//设置一周中的第一天。默认星期天0，星期一为1，以此类推。
        nextText : '下一月',//设置“下个月”链接的显示文字。鼠标放上去的时候
        prevText : '上一月',//设置“上个月”链接的显示文字。
        //showButtonPanel: true,//是否显示按钮面板
        currentText : '今天',//设置当天按钮的文本内容，此按钮需要通过showButtonPanel参数的设置才显示。
        gotoCurrent : false,//如果设置为true，则点击当天按钮时，将移至当前已选中的日期，而不是今天。
        dateFormat: 'yy-mm-dd',
        onClose: function( selectedDate ) {
          $(".test-datepicker").eq(2).datepicker( "option", "maxDate", selectedDate );
        }
      });
    },
    queryDetail:function(a,b){
      var me = this;
      localStorage.setItem('modelId',b);
      localStorage.setItem('oldTableName',a);
      localStorage.setItem('isFromTrail',true);
      me.$router.push('/product/export-result');
    }
  }
};
